<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>鱼类运动轨迹追踪 - 智能水产养殖系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns"></script>
</head>
<body class="bg-light">

<div class="container py-4">
    <div class="row mb-4">
        <div class="col-12">
            <h2 class="text-primary">
                <i class="bi bi-graph-up-arrow"></i> 鱼类运动轨迹追踪
            </h2>
            <p class="text-muted">实时监控鱼类运动轨迹，分析行为模式</p>
        </div>
    </div>

    <div class="row">
        <div class="col-md-4">
            <div class="card shadow">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="bi bi-gear"></i> 追踪控制</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">选择鱼类</label>
                        <select class="form-select" id="fish-selector">
                            <option value="fish_1">鱼类 #1</option>
                            <option value="fish_2">鱼类 #2</option>
                            <option value="fish_3">鱼类 #3</option>
                            <option value="fish_4">鱼类 #4</option>
                            <option value="fish_5">鱼类 #5</option>
                        </select>
                    </div>
                    <button class="btn btn-primary w-100" onclick="updateTrajectory()">
                        <i class="bi bi-arrow-clockwise"></i> 更新轨迹
                    </button>
                </div>
            </div>

            <div class="card shadow mt-3">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0"><i class="bi bi-lightbulb"></i> 行为分析</h5>
                </div>
                <div class="card-body">
                    <div class="alert alert-info">
                        <h6>运动模式</h6>
                        <p>该鱼类表现出典型的觅食行为模式，主要在浅水区域活动。</p>
                    </div>
                    <div class="alert alert-success">
                        <h6>健康状况</h6>
                        <p>运动轨迹正常，无异常行为，健康状况良好。</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-8">
            <div class="card shadow">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0"><i class="bi bi-map"></i> 轨迹数据</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead class="table-dark">
                                <tr>
                                    <th>时间</th>
                                    <th>X坐标</th>
                                    <th>Y坐标</th>
                                    <th>深度(m)</th>
                                    <th>速度(m/s)</th>
                                </tr>
                            </thead>
                            <tbody id="trajectory-table">
                                <!-- 数据将通过JavaScript填充 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-4">
        <div class="col-12 text-center">
            <a href="{{ url_for('user_home') }}" class="btn btn-secondary">
                <i class="bi bi-arrow-left"></i> 返回主页
            </a>
        </div>
    </div>
</div>

<script>
let currentTrajectory = [];

function updateTrajectory() {
    const fishId = document.getElementById('fish-selector').value;
    
    fetch(`/api/trajectory/${fishId}`)
        .then(response => response.json())
        .then(data => {
            currentTrajectory = data.trajectory;
            updateTable();
        })
        .catch(error => {
            console.error('Error:', error);
            alert('获取轨迹数据失败');
        });
}

function updateTable() {
    const tableBody = document.getElementById('trajectory-table');
    tableBody.innerHTML = '';
    
    // 只显示最近20个数据点
    const recentData = currentTrajectory.slice(-20);
    
    recentData.forEach(point => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td>${point.timestamp}</td>
            <td>${point.x}</td>
            <td>${point.y}</td>
            <td>${point.depth}</td>
            <td>${point.speed}</td>
        `;
        tableBody.appendChild(row);
    });
}

document.addEventListener('DOMContentLoaded', function() {
    updateTrajectory();
});
</script>

</body>
</html> 